<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas图标生成器</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        
        .icon-section {
            background: white;
            padding: 20px;
            margin: 10px 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        canvas {
            border: 1px solid #ddd;
            margin: 10px;
            border-radius: 4px;
        }
        
        .download-btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
            font-size: 12px;
        }
        
        .download-btn:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <h1>🎨 Canvas图标生成器</h1>
    <p>点击下载按钮保存PNG格式的图标文件</p>
    
    <div class="icon-section">
        <h3>16x16 图标</h3>
        <canvas id="canvas16" width="16" height="16"></canvas>
        <button class="download-btn" onclick="downloadIcon('canvas16', 'icon16.png')">下载 16x16</button>
    </div>
    
    <div class="icon-section">
        <h3>32x32 图标</h3>
        <canvas id="canvas32" width="32" height="32"></canvas>
        <button class="download-btn" onclick="downloadIcon('canvas32', 'icon32.png')">下载 32x32</button>
    </div>
    
    <div class="icon-section">
        <h3>48x48 图标</h3>
        <canvas id="canvas48" width="48" height="48"></canvas>
        <button class="download-btn" onclick="downloadIcon('canvas48', 'icon48.png')">下载 48x48</button>
    </div>
    
    <script>
        function createGradient(ctx, size) {
            const gradient = ctx.createLinearGradient(0, 0, size, size);
            gradient.addColorStop(0, '#667eea');
            gradient.addColorStop(0.5, '#764ba2');
            gradient.addColorStop(1, '#f093fb');
            return gradient;
        }
        
        function drawIcon16() {
            const canvas = document.getElementById('canvas16');
            const ctx = canvas.getContext('2d');
            
            // 清除画布
            ctx.clearRect(0, 0, 16, 16);
            
            // 绘制背景圆形
            ctx.beginPath();
            ctx.arc(8, 8, 7, 0, 2 * Math.PI);
            ctx.fillStyle = createGradient(ctx, 16);
            ctx.fill();
            
            // 绘制网络节点
            ctx.fillStyle = 'white';
            
            // 中心节点
            ctx.beginPath();
            ctx.arc(8, 8, 1.5, 0, 2 * Math.PI);
            ctx.fill();
            
            // 周围节点
            ctx.beginPath();
            ctx.arc(4, 4, 1, 0, 2 * Math.PI);
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(12, 4, 1, 0, 2 * Math.PI);
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(4, 12, 1, 0, 2 * Math.PI);
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(12, 12, 1, 0, 2 * Math.PI);
            ctx.fill();
            
            // 连接线
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 0.8;
            
            ctx.beginPath();
            ctx.moveTo(4, 4);
            ctx.lineTo(6.5, 6.5);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(12, 4);
            ctx.lineTo(9.5, 6.5);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(4, 12);
            ctx.lineTo(6.5, 9.5);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(12, 12);
            ctx.lineTo(9.5, 9.5);
            ctx.stroke();
        }
        
        function drawIcon32() {
            const canvas = document.getElementById('canvas32');
            const ctx = canvas.getContext('2d');
            
            ctx.clearRect(0, 0, 32, 32);
            
            // 背景圆形
            ctx.beginPath();
            ctx.arc(16, 16, 15, 0, 2 * Math.PI);
            ctx.fillStyle = createGradient(ctx, 32);
            ctx.fill();
            
            // 中央拦截器
            ctx.fillStyle = 'white';
            ctx.fillRect(13, 13, 6, 6);
            
            ctx.fillStyle = '#667eea';
            ctx.fillRect(14, 14, 4, 4);
            
            // 数据流线条
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 2;
            ctx.lineCap = 'round';
            
            // 左侧输入
            ctx.beginPath();
            ctx.moveTo(4, 12);
            ctx.lineTo(12, 12);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(4, 16);
            ctx.lineTo(12, 16);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(4, 20);
            ctx.lineTo(12, 20);
            ctx.stroke();
            
            // 右侧输出
            ctx.beginPath();
            ctx.moveTo(20, 12);
            ctx.lineTo(28, 12);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(20, 16);
            ctx.lineTo(28, 16);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(20, 20);
            ctx.lineTo(28, 20);
            ctx.stroke();
        }
        
        function drawIcon48() {
            const canvas = document.getElementById('canvas48');
            const ctx = canvas.getContext('2d');
            
            ctx.clearRect(0, 0, 48, 48);
            
            // 背景圆形
            ctx.beginPath();
            ctx.arc(24, 24, 22, 0, 2 * Math.PI);
            ctx.fillStyle = createGradient(ctx, 48);
            ctx.fill();
            
            // 中央拦截器
            ctx.fillStyle = 'white';
            ctx.fillRect(18, 18, 12, 12);
            
            ctx.fillStyle = '#667eea';
            ctx.fillRect(20, 20, 8, 8);
            
            // 中心圆
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(24, 24, 2, 0, 2 * Math.PI);
            ctx.fill();
            
            // 数据流
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 2.5;
            ctx.lineCap = 'round';
            
            // 左侧输入流
            ctx.beginPath();
            ctx.moveTo(6, 18);
            ctx.lineTo(16, 18);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(6, 24);
            ctx.lineTo(16, 24);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(6, 30);
            ctx.lineTo(16, 30);
            ctx.stroke();
            
            // 右侧输出流
            ctx.beginPath();
            ctx.moveTo(32, 18);
            ctx.lineTo(42, 18);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(32, 24);
            ctx.lineTo(42, 24);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(32, 30);
            ctx.lineTo(42, 30);
            ctx.stroke();
            
            // 状态指示灯
            ctx.fillStyle = '#00ff88';
            ctx.beginPath();
            ctx.arc(24, 12, 2, 0, 2 * Math.PI);
            ctx.fill();
            
            ctx.fillStyle = '#ff4757';
            ctx.beginPath();
            ctx.arc(24, 36, 2, 0, 2 * Math.PI);
            ctx.fill();
        }
        
        function downloadIcon(canvasId, filename) {
            const canvas = document.getElementById(canvasId);
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL('image/png');
            link.click();
        }
        
        // 初始化绘制所有图标
        window.onload = function() {
            drawIcon16();
            drawIcon32();
            drawIcon48();
        };
    </script>
</body>
</html>
